<template>
	<view class="container">
		<view class="left">
			<uni-list class="class-group" :border="false">
				<uni-list-item :customStyle="customStyle" :border="false" @click="classChange(item.classId)"
					:clickable="clickable" v-for="(item,index) in leftItems"
					:class="{'class-item-activity':selectCategoryId==item.classId}" class="class-item"
					:title="item.className" :key="item.classId">
				</uni-list-item>
			</uni-list>
		</view>
		<view class="right">
			<view v-for="(item, index) in rightItems" :index="index" :key="item.classId">
				<uni-section v-if="thirdItems.length>0" :title="item.className" titleFontSize="16px" padding>

					<uni-grid :showBorder="showBorder" :column="3" :highlight="true" @change="change">
						<uni-grid-item v-for="(good, index2) in thirdItems" :index="index2" :key="good.classId">
							<view v-if="item.classId==good.parentId" class="grid-item-box" style="background-color: #fff;">
								<image :src="good.classImage" mode="heightFix"></image>
								<text class="text">{{good.className}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>

		</view>
	</view>
</template>

<script>
	// #ifdef MP-WEIXIN
	import categoryJson from "../../static/json/category.json"
	// #endif


	export default {
		data() {
			return {
				leftItems: [],
				rightItems: [],
				thirdItems:[],
				showBorder: false,
				clickable: true,
				selectCategoryId: undefined,
				customStyle: {
					backgroundColor: "#F5F5F5",
					padding: '',
				}
			}
		},
		onLoad() {
			this.onload()
			
		},
		methods: {
			classChange(data) {
				this.selectCategoryId = data;
				this.getChildClass(this.selectCategoryId);

			},
			onload() {
				let that = this;		
				uni.request({
					url: "http://localhost:8081/product/class/list",
					success(res) {						
					console.log(that.getClassTree(res.data))	
						 res.data.forEach((item,index)=>{
							 if(item.parentId==0){		
								 if(index==0){
									 that.selectCategoryId=item.classId;
									
								 }
								 that.leftItems.push(item);
							
							 }							
						})
						that.getChildClass(that.selectCategoryId);
						
						
					}
				})
			},
			
			getChildClass(parentId) {//获取二、三级分类
				let that = this;		
				uni.request({
					url: "http://localhost:8081/product/class/secondList",
					data:{pid:parentId},					
					success(res) {						
						console.log(res.data)					
						that.rightItems=res.data.secondList
						that.thirdItems=res.data.thirdList
					}
				})
			},
			
			
			getClassTree(source){
				for (var i = 0; i < source.length; i++) {
					let id= source[i].classId;
					if(!source[i].children){
						source[i].children=[];
					}
					for (var x = 0; x < source.length; x++) {
						if(id==source[x].parentId){
							source[i].children.push(source[x]);
						}
					}
				}
				return source;
				
			}
		}
	}
</script>

<style lang="scss">
	* {
		/* height: 100%; */
	}

	.container {
		display: flex;
		justify-content: flex-start;

	}

	.right {
		width: 100%;
		overflow: scroll;
		height: 100vh;
		scrollbar-width: none;
		/* 对于Firefox 64 */
	}



	.left {
		height: 100vh;
		overflow-y: scroll;
		scrollbar-width: none;
		/* 对于Firefox 64 */
	}

	/* 设置滚动条为空 */
	.left::-webkit-scrollbar,
	.right::-webkit-scrollbar {
		display: none;
	}


	.grid-item-box image {
		width: 100rpx !important;
		height: 100rpx !important;
	}


	.grid-item-box {
		flex: 1;
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* padding: 15px 0; */
	}


	.left {
		.class-group {

			/* #ifndef H5 || APP-VUE */
			// 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
			/deep/ .uni-list {
				/* #endif */
				flex-direction: column;

				/* #ifndef H5 || APP-VUE */

			}

			/* #endif */
		}
	}

	.class-item-activity .uni-list-item {
		background-color: #FFF !important;
	}
	
	
	
	.class-item{
		.uni-list-item__container{
			padding: 0;
			width: 100px; 
			height: 50px;
			line-height: 50px;
			text-align: center;
			.uni-list-item__content{
				padding: 0;
			}
		}
	}
</style>